// 退货退款列表

import React from 'react';
import { platformType } from '@/utils/config';
import CommonTable from '@/components/CommonTable';
import IconFont from '@/components/IconFont';
import { useNavigate } from 'react-router-dom';
import moment from 'moment';

const dateFormat = 'YYYY-MM-DD HH:mm:ss';

const OrderRefundList = ({ data, throwParams, headerHeight, handleFiltersChange }) => {
	const navigate = useNavigate();
  //商品退货状态渲染
  const goodsReturnStatus = (type) => {
    switch (type) {
      case 0:
        return '待登记'
        break;
      case 1:
        return '待处理'
        break;
      case 2:
        return '待上架'
        break;
      case 3:
        return '待指派'
        break;
      case 4:
        return '已指派'
        break;
      case 5:
        return '退货中'
        break;
      case 6:
        return '退货异常'
        break;
      case 7:
        return '质检异常'
        break;
      case 8:
        return '拒绝退货'
        break;
      case 9:
        return '退货成功'
        break;
      case 10:
        return '商家审核'
        break;
      case 11:
        return '异常已处理'
        break;
    }
  }

  //跳转页面去订单处理
  const linkToOrderhandle = (record) => {
    navigate('/views/order/list', {
			state: {
				orderSn: record.orderSn
			}
    });
  }

  //传出uniqueCode和展开详情的面包屑
  const handleCheckDetail = (record) => {
    const { uniqueCode, refundOrderSn } = record
    throwParams(uniqueCode, refundOrderSn)
  }

  const columns = [
    {
      title: "退货单号",
      dataIndex: "refundApplyOrder",
      key: "refundApplyOrder",
      width: 185,
      filters: [
        { text: '有', value: '1' },
        { text: '无', value: '0' },
      ],
      filterMultiple: false,
    },
    {
      title: "商品唯一码",
      dataIndex: "uniqueCode",
      key: "uniqueCode",
      width: 170
    },
    {
      title: "所属平台店铺",
      dataIndex: "orderChannel",
      key: "orderChannel",
      width: 145,
      render: (_, record) => {
        return (
          record.ecStoreName && (
            <div>
              {platformType[record.orderChannel] && <IconFont type={`icon${platformType[record.orderChannel]}`} style={{ fontSize: 24, marginRight: 2 }} />}
              <div>{record.ecStoreName || ''}</div>
            </div>
          )
        )
      }
    },//500
    {
      title: "所属渠道",
      dataIndex: "channelName",
      key: "channelName",
      width: 130
    },
    {
      title: "系统订单号",
      dataIndex: "orderSn",
      key: "orderSn",
      width: 200,
      render: (text, record) => {
        return <a onClick={() => { linkToOrderhandle(record) }}>{text}</a>
      }
    },
    {
      title: "店铺订单号",
      dataIndex: "outOrderSn",
      key: "outOrderSn",
      width: 185
    },
    {
      title: "收货人",
      dataIndex: "receiverName",
      key: "receiverName",
      width: 90
    },
    {
      title: "收货人手机号",
      dataIndex: "receiverPhone",
      key: "receiverPhone",
      width: 110
    },//715
    {
      title: "申请退款金额",
      dataIndex: "applyRefundAmount",
      key: "applyRefundAmount",
      width: 120,
      render: (text) => <span className='common-color9'>{text ? '¥' + text : ''}</span>
    },
    {
      title: "实际退款金额",
      dataIndex: "refundAmount",
      key: "refundAmount",
      width: 120,
      render: (text) => <span className='common-color9'>{text ? '¥' + text : ''}</span>
    },
    {
      title: "所属门店名称",
      dataIndex: "storeName",
      key: "storeName",
      width: 128
    },
    {
      title: "申请时间",
      dataIndex: "applyTime",
      key: "applyTime",
      width: 160,
      render: (text) => <span>{moment(text).format(dateFormat)}</span>
    },
    {
      title: "完成时间",
      dataIndex: "finishTime",
      key: "finishTime",
      width: 160
    },
    {
      title: "退货类型",
      dataIndex: "type",
      key: "type",
      width: 100,
      render: (text) => text == 0 ? '仓内退货' : '快递退货'
    },
    {
      title: "退货商品状态",
      dataIndex: "state",
      key: "state",
      width: 120,
      render: text => goodsReturnStatus(text)
    },
    {
      title: "备注",
      dataIndex: "note",
      key: "note",
      width: 160
    },
    {
      title: "操作",
      dataIndex: "operate",
      key: "operate",
      fixed: 'right',
      width: 100,
      render: (_, { uniqueCode, refundApplyOrder}) => {
        if(!uniqueCode) {
          return null;
        }
        return <span className='opera-span-common' style={{ cursor: 'pointer' }} onClick={() =>throwParams(uniqueCode, refundApplyOrder)}>查看详情</span>
      }
    }
  ];

  const commonTableProps = {
    data,
    columns,
    scroll: { x: 2213, y: `calc(100vh - ${headerHeight + 286}px)` },
    rowKey: 'id',
    onChange: (_, filters) => {
      handleFiltersChange(filters)
    }
  };

  return (
    <CommonTable {...commonTableProps} />
  )
}

export default OrderRefundList
